<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>musiceye</title>
	<!-- Blueprint Framework CSS -->
	<link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection" />
	<link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print" />
	<!--[if IE]><link rel="stylesheet" href="css/blueprint/lib/ie.css" type="text/css" media="screen, projection" /><![endif]-->

	<link rel="stylesheet" type="text/css" href="css/musiceye.css" />
	<link rel="stylesheet" type="text/css" href="css/musiceye-result.css" />
	
	{* <!-- Show the grid and baseline -->
	<style type="text/css">
	    /*<![CDATA
	            .container { background: url('blueprint/lib/grid.png'); }
	    /*]]>*/
	</style> *}

<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-3403922-1";
urchinTracker();
</script>

<script type="text/javascript" src="musiceye.js"></script>
</head>

<body onload="javascript:flip_loadCheck()">
<div class="container">

<div class="column span-17" id="header">
	<a href="{$smarty.server.SCRIPT_NAME}"><img id="logo" src="gfx/logo.gif" alt="" /></a>
</div>
<div class="column span-4 last" id="menu">
	<a href="index.php">Home</a> | 
	<a href="about.php">About</a>
</div>

<form action="" method="get" name="form">
<div class="column span-12"> 
	<h2>1. <span>State your music taste</span></h2>

	<div id="step1_box"> 
	<input type="hidden" name="tag" value="{$smarty.get.tag}" />
	<div id="tagContainer">
		<div id="tagCloud">
	    {foreach item=tag from=$tags}
	    	<a class="tag" style="font-size: {$tag.size}%" id="tag_{$tag.name}" href="#" onclick="javascript:chooseTag('{$tag.name}', this);unset_username(this);unset_artists(this);unset_tag_2(this)">{$tag.name|replace:' ':'&nbsp;'}</a>
	    {/foreach}
    	</div>
   		<div id="addTag">
   			Add tag 
   			<input type="text" id="tagTextField" name="tagTextField" onkeydown="javascript:unset_username(this);unset_artists(this);unset_tag_1(this);" onfocus="javascript:flip_tag('1')" value="{$smarty.get.custom_tag}" class="textfield" tabindex="1" onblur="javascript:flip_tag('0')" />
	    </div>
	</div>
    <div class="inputbox" id="artistsInputBox">
        <div style="float:left"><span class="or">OR</span> &nbsp;</div>
        <div style="float:left"> 
        Enter some of your favourite artists</strong> (separated by a comma)
        <textarea onkeydown="javascript:unset_username(this);unset_tag(this);" onfocus="javascript:flip_artists('1')" tabindex="1" name="inputbox_artists" class="input_textarea" rows="1" cols="40" onblur="javascript:flip_artists('0')">{$smarty.get.inputbox_artists}</textarea>
		</div>
    	<div style="clear:both"></div>
    </div>
    <div class="inputbox" id="lastfmbox">
        <div style="float:left"><span class="or">OR</span> &nbsp;</div>
        <div style="float:left">
        	<a href="http://www.last.fm"><img src="gfx/lastfm_mini_grey.gif" alt="last.fm" /></a> username<br/>
        	<input type="text" onkeydown="javascript:unset_artists(this);unset_tag(this);" onfocus="javascript:flip_username('1');" tabindex="1" name="username" value="{$smarty.get.username}" class="textfield" onblur="javascript:flip_username('0')" />
        </div>
    	<div style="clear:both"></div>
    </div>
	
	</div>
	
</div>

<div class="column span-6 last"> 
<h2>2. <span>Select venue</span></h2>
   	<select name="venue_id" id="venue" size="10" tabindex="2" onfocus="javascript:flip_venue('1');" onblur="javascript:flip_venue('0');">
   	<optgroup label="Festivals" class="venue_label" id="festivalsGroup">
	{foreach item=venue from=$venues_festivals}
   		{if $smarty.get.venue_id eq $venue.id}
	    	<option selected="selected" value="{$venue.id}">{$venue.name}</option> 
	    {else}
	    	<option value="{$venue.id}">{$venue.name}</option> 
		{/if}	
   	{/foreach}
   	</optgroup>
   	<optgroup label="Gigs" class="venue_label" id="gigsGroup">
	{foreach item=venue from=$venues_gigs}
   		{if $smarty.get.venue_id eq $venue.id}
	    	<option selected="selected" value="{$venue.id}">{$venue.name}</option> 
	    {else}
	    	<option value="{$venue.id}">{$venue.name}</option> 
		{/if}	
	{/foreach}
   	</optgroup>
   </select>
   <p align="left"><a class="system" href="about.php">Do you miss a venue?</a></p>
   <input type="submit" name="submit" class="submit" tabindex="3" value="Get your line-up" />
</div>
<div>

</div>
</form>
</div>
<div class="container">
<div class="column span-20 last">
	<br/>
	<p id="venueMeta">{$venueMeta}</p><br/>
	{if $reultLineup neq ""}
		<ol id="hitlist">
	        {foreach item=music from=$reultLineup name=list}
	        	{if $smarty.foreach.list.index is even}
	           		<li class="hit_0">
	           	{else}
	           		<li class="hit_1">
	           	{/if}
					  <div onclick="">
	                  <div class="hit_number">{"`$smarty.foreach.list.index+1`"}&nbsp;</div>
	                  <div class="hit_avatar"><img src="{$music->avatar}" alt="" /></div>
	                  <div class="hit_container">
	                  	<a class="hitlink" onclick="javascript:ajaxShowArtistBio('{$music->artist|urldecode}','{$smarty.foreach.list.index}');toggleVisibility('result{$smarty.foreach.list.index}','toggle{$smarty.foreach.list.index}','auto');">{$music->artist|lower|capitalize}</a>
	            
	            {foreach item=match from=$music->match name=similarList1}
	                {if $smarty.foreach.similarList1.index lte 1}
	                	{$match->percentage}% similar to <a class="similarLink" onclick="javascript:ajaxShowArtistBio('{$match->artist|urldecode}','{$smarty.foreach.list.index}');toggleVisibility('result{$smarty.foreach.list.index}','toggle{$smarty.foreach.list.index}','');">{$match->artist|capitalize}</a><br/>
	            	{/if}
	            {/foreach}

	                  </div>
	                  <img id="toggle{$smarty.foreach.list.index}" class="toggle_img" src="gfx/more.gif" alt="" onclick="javascript:ajaxShowArtistBio('{$music->artist|urldecode}','{$smarty.foreach.list.index}');toggleVisibility('result{$smarty.foreach.list.index}','toggle{$smarty.foreach.list.index}','auto');"/></div>
	            	  <div id="result{$smarty.foreach.list.index}" class="hit_info" style="display:none">
	            	  	<div class="similar">
	            	  	
	            {foreach item=match from=$music->match name=similarList2}
	                {if $smarty.foreach.similarList2.index gte 2}
	                	{$match->percentage}% similar to <a class="similarLink" onclick="javascript:ajaxShowArtistBio('{$match->artist|urldecode}','{$smarty.foreach.list.index}');">{$match->artist|capitalize}</a><br/>
	            	{/if}
	            {/foreach}
	            
	            	<br/>
	            {if $music->note neq ""}
	            	<br/>{$music->note} 
	            {/if}
	            	</div>
	            	<div class="artistBio" id="artistBio_{$smarty.foreach.list.index}">Loading info..</div>
	            </div><div style="clear:both"></div></li>
	    {/foreach}
	    </ol>
    {/if}
    <br/>
    {if $input neq ""}
    	<strong>Input was: </strong>{$input}<br/><br/>
   	{/if}

<img src="gfx/audioscrobbler.gif" alt="" />  
</div>

</div>
</body>
</html>